<template>
	<div class="folder-wrapper">
		<!--<Tree :data="folderTree" :render="renderFunc"></Tree>-->
		<folder-tree
			:folder-list.sync="folderList"
			:file-list.sync="fileList"
			:folder-drop="folderDrop"
			:file-drop="fileDrop"
			:beforeDelete="beforeDelete"
		/>
	</div>
</template>

<script>
	import {getFileList, getFolderList} from '../../api/data';
	import folderTree from '../../components/folder-tree';

	export default {
		name: "Folder-tree",
		components: {folderTree},
		data() {
			return {
				folderList: [],
				fileList: [],
				folderDrop: [{name: 'rename', title: '重命名'}, {name: 'delete', title: '删除文件夹'}],
				fileDrop: [{name: 'rename', title: '重命名'}, {name: 'delete', title: '删除文件'}]
				// folderTree: [],
				/*renderFunc: (h, {root, node, data}) => {
					return (
						<div class="tree-item">
							{ data.type === 'folder' ? <icon type="ios-folder" color="#2d8cf0" style="margin-right:10px;"/> : '' }
							{ data.title }
						</div>)
				}*/
			}
		},
		methods: {
			beforeDelete() {
				return new Promise(((resolve, reject) => {
					setTimeout(() => {
						let error = new Error();
						if (!error) {
							resolve();
						} else {
							reject(error);
						}
					}, 2000);
				}))
			}
		},
		mounted() {
			Promise.all([getFolderList(), getFileList()]).then(res => {
				this.folderList = res[0].data;
				this.fileList = res[1].data;
				// this.folderTree = transferFolderToTree(putFileInFolder(res[0].data, res[1].data));
			});
		}
	}
</script>

<style lang="less">
	.folder-wrapper {
		width: 300px;

		/*.tree-item{
			display: inline-block;
			width: ~"calc(100%-50px)";
			height: 30px;
			line-height: 30px;
		}*/
	}
</style>
